<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
		<title>绑定手机号</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style type="text/css">
			body {
				background-color: #F5F5F5;
			}

			.aui-bar-nav .aui-pull-left {
				padding: 0 0.25rem;
			}

			.aui-list {
				padding: 0 0.5rem;
			}

			.aui-title {
				font-weight: bolder;
			}

			.aui-list-item- {
				height: 2.5rem;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.aui-list-item-label- img {
				width: 1rem;
			}

			.aui-btn-block {
				height: 2.2rem;
				line-height: 2.2rem;
				color: #FFFFFF;
				/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
				/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
				/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			}

			.aui-btn {
				border-radius: 0.25rem;
			}

			::placeholder {
				color: #999999;
			}
			.aui-text-linear{
				font-family:PingFangSC-Medium,PingFang SC;
			}
		</style>
	</head>

	<body>
		<div id="aui-header" class="ming-bg-blue">
			<header class="aui-bar aui-bar-nav ming-bg-blue aui-border-b">
				<a class="aui-pull-left" tapmode onclick="close_win()">
					<img class="btn-img-back" src="../../image/btn/btn-back.png" />
				</a>
				<div class="aui-title">
					<div class="" style="color:#ffffff;">
						绑定手机号
					</div>
				</div>
			</header>
		</div>
		<div class="aui-content" id="app" v-cloak="">
			<div class="aui-list aui-list-noborder">
				<div class="aui-list-item- aui-border-b">

					<div class="ming-pr" style="flex: 1;color:#B3B3B3;">
						<input v-model="mobile" type="tel" maxlength="11" placeholder="请输入手机号"  style="font-weight: 600;color:#000000;"/>
						<img tapmode @click="mobile=''" v-if="mobile!=''" class="icon-clear" src="../../image/btn/btn-search-delete.png" />
					</div>
				</div>
				<div class="aui-list-item-">

					<div class="ming-pr" style="color:#B3B3B3;">
						<input v-model="sms_code" type="tel" maxlength="6" placeholder="短信验证码"  style="font-weight: 600;color:#000000;"/>
						<img tapmode @click="sms_code=''" v-if="sms_code!=''" class="icon-clear" src="../../image/btn/btn-search-delete.png" />
					</div>
					<div style="flex: 1;text-align: right;color: #DDDDDD;" tapmode onclick="getCode()">
						<span :class="{'aui-text-linear':mobile!=''}" style="font-weight:600 !important;">{{sms_time}}</span>
					</div>
				</div>
			</div>
			<div class="aui-padded-l-10 aui-padded-r-10" style="margin-top: 6.5rem;">
				<div class="aui-btn aui-btn-block" :class="{'aui-bg-linear':sms_code!=''&&mobile!=''}" tapmode onclick="quickLoginBindMobile()">
					确定
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				mobile: '',
				sms_code: '',
				sms_time: '获取验证码',
				flag: '',
				open_id: '',
				third_username: '',
			},
		})
		apiready = function() {
			$api.fixStatusBar($api.byId('aui-header'))
			vm.open_id = $api.getStorage('bindinfo').openid
			vm.flag = $api.getStorage('bindinfo').flag
			vm.third_username = $api.getStorage('bindinfo').name
			$api.rmStorage('bindinfo')
		};

		function getCode() {
			if(vm.sended) {
				return;
			}
			if(vm.mobile == '') {
				toast('手机号不能为空')
				return;
			}
			get_data('api/Sms/sendAuthCode', {
				mobile: vm.mobile,
//				flag:vm.flag
			}, function(ret) {
				//从服务器请求验证码并返回结果，如果已发送操作如下：
				if(ret.status=='1') {
					vm.sended = 1;
					var timer = 60;
					vm.sms_time = timer + 's'
					var ti = setInterval(function() {
						timer = timer - 1;
						vm.sms_time = timer + 's';
						if(timer < 0) {
							vm.sended = 0;
							vm.sms_time = '获取验证码';
							clearInterval(ti);
						}
					}, 1000);
				}
				toast(ret.msg)
			})
		}

		function quickLoginBindMobile() {
			if(vm.mobile == '') {
				toast('手机号不能为空')
				return;
			}
			if(vm.sms_code == '') {
				toast('验证码不能为空')
				return;
			}
			if(vm.sms_code < 6) {
				toast('验证码错误')
				return;
			}
			get_data('api/login/quickLoginBindMobile', {
				mobile: vm.mobile,
				authCode: vm.sms_code,
				openid: vm.open_id,
				third_username: vm.third_username,
				flag: vm.flag
			}, function(ret) {
				if(ret.status) {
					$api.setStorage('token', ret.data.token)
					save_userinfo_new(ret)
					send_event('logined')
					send_event('mobile_change')
					setTimeout(function() {
						close_win()
					}, 300);
				} else {
					toast(ret.msg)
				}
			})
		}
	</script>

</html>
